<template>
  <div class="reply-meta__module">
    <span class="extend-time">{{time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
    <span :class="['icon__btn iconfont',isLiked?'icon-dianzan1':'icon-dianzan', {active:isLiked}]" @click="replyACtion(1)" title="点赞" >{{likedCount}}</span>
    <span :class="['icon__btn iconfont unlike__btn',isHeat?'icon-dianzan1':'icon-dianzan', {active:isHeat}]" @click="replyACtion(2)" title="踩" />
    <span v-if="isSelf" class="icon__btn iconfont icon-shanchu" title="删除" @click="deleteReply" />
    <span @click="$emit('clickReplyBtn')" class="reply__btn">回复</span>
    <!-- 弹出菜单 -->
    <div class="operation">
      <div class="btn-icon iconfont icon-more1" />
      <div class="opera-list">
        <span @click="$emit('clickBlackListBtn')" class="opera-btn blacklist">加入黑名单</span>
        <span @click="$emit('clickreportBtn')" class="opera-btn report">举报</span>
      </div>
    </div>
  </div>
</template>

<script>
import { replyActionAPI, delReplyAPI } from '@/api/reply';

export default {
    name: 'ReplyMetaModule',
    props: {
        reply: {
            type: Object,
            required: true,
        },
    },
    computed: {
        rpid() {
            return this.reply.rpid;
        },
        time() {
            return this.reply.created_at;
        },
        action() {
            return Number(this.reply.action) || 0;
        },
        likedCount() {
            return this.reply.liked || 0;
        },
        isLiked() {
            return this.action === 1;
        },
        isHeat() {
            return this.action === 2;
        },
        isSelf() {
            return this.reply.uid === this.$store.getters.userInfo.uid;
        },
    },
    methods: {
        async replyACtion(param) {
            const action = param === this.action ? 0 : param;
            const { code } = await replyActionAPI(this.rpid, action);
            if (code !== 200) return;
            this.actionHeander(action);
            this.reply.action = action;
        },
        actionHeander(action) {
            const isUnlike = action === 0;
            const isHeat = action === 2;
            if (this.action === 1 && (isUnlike || isHeat)) {
                this.reply.liked -= 1;
                return;
            }
            if (action === 1) {
                this.reply.liked += 1;
            }
        },
        async deleteReply() {
            await delReplyAPI(this.rpid);
            this.$emit('delete');
        },
    },
};
</script>

<style lang="less">
.reply-meta__module {
  line-height: 26px;
  border-bottom: 2px dashed fade(@base_color, 70%);
  font-size: 12px;
  color: #99a2aa;
  > span {
    margin-right: 20px;
    user-select: none;
    cursor: pointer;
  }
  .icon__btn {
    line-height: 26px;
    margin-right: 20px;
    font-size: 12px;
    user-select: none;
    cursor: pointer;
    color: #99a2aa;
    &::before {
      margin-right: 5px;
      font-size: 16px;
    }
    &:not(.active):hover::before {
      display: inline-block;
      transform: scale(1.3);
      font-weight: bold;
      color: darken(@base_color, 20%);
    }
    &.active {
      color: darken(@base_color, 20%);
    }
  }
  .unlike__btn {
    display: inline-block;
    transform-origin: center;
    transform: rotateZ(180deg);
  }
  .reply__btn {
    margin-right: 15px;
    padding: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
  }
  .reply__btn:hover {
    background: @base_color_fade;
    color: darken(@base_color, 20%);
  }
  .operation {
    float: right;
    padding: 0 10px;
    position: relative;
    top: 5px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover .opera-list {
      display: block;
    }
  }
  .opera-list {
    display: none;
    width: 100px;
    padding: 10px 0;
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 10;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
    color: #222;
    .opera-btn {
      display: block;
      width: 100%;
      height: 36px;
      padding: 0 15px;
      line-height: 36px;
      transition: all 0.3s;
      cursor: pointer;
    }
    .opera-btn:hover {
      background-color: @base_color_fade;
    }
  }
}
</style>
